@import (reference) '../../../app/less/typography';
@import (reference) "../../../app/less/app-icons";
@import (reference) '../../../app/less/classes';
@import (reference) '../../../app/less/app';
@import (reference) 'config';
@import (reference) 'icons';

@tx-icon-size: 80px;

md-dialog.txinfo {
  md-dialog-content {
    padding-top: 0;
  }
}

w-transaction-info,
w-transaction-info-header,
w-transaction-info-content,
w-transaction-export,
w-transaction-info-json {
  display: block;
  width: 100%;
}

w-transaction-info-general {
  .txinfo__row:first-child {
    border-top-style: dashed;
  }
}

w-transaction-info-header + w-transaction-info-general {
  .txinfo__row:first-child {
    border-top-style: solid;
  }
}

.txinfo {
  display: block;
  width: 100%;

  &__data {
    width: 100%;
  }

  .plate-note {
    margin: 0 0 20px;
  }

  .noborder {
    margin-bottom: -1px;
    background: @color-white;
    position: relative;
    z-index: 1;
  }

  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    .bottom-warning {
      width: 100%;
      position: relative;
      background: @color-white;
      margin-bottom: -1px;
      padding-top: 30px;
      border-top: 1px solid @color-basic-100;
    }

    &-scrolled {
      max-height: 248px;
      overflow: auto;
      margin-right: -13px;
      padding-right: 13px;
    }
  }

  &__lead {
    text-align: center;
    padding: 0 0 30px;
    border-bottom: 1px solid @color-basic-100;
    .noborder();
    z-index: 2;

    &.noborder {
      border-bottom: 0 none;
      margin: 0;
    }

    h3 {
      margin: 0 0 6px;
      &.vote-token-h3 {
        margin: 20px 0 6px;
      }
    }

    .txinfo__rating {
      padding-top: 83px;
    }

    .tooltip {
      min-height: 30px;
      display: none;
      position: absolute;
      bottom: 100%;
      padding: 5px 0 5px 10px;
      transform: translate(calc(-50% + 8px), -8px);
      z-index: 2;
      cursor: pointer;
      border-radius: 4px;
      background: #4e5c6e;
    }
    &__content {
      color: #fff;
      font-size: 11px;
      max-width: 240px;
      max-height: 150px;
      width: max-content;
      overflow: auto;
      display: block;
      padding-right: 10px;
    }

  }

  &__header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 6px;
    h3 {
      margin: 0;
    }
  }

  &__row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 13px 0;
    border-top: 1px dashed @color-basic-100;

    &:first-child:not(.txinfo__row-header) {
      border-top: 1px solid @color-basic-100;
    }

    &-header {
      border-bottom: 1px solid @color-basic-100;
      border-top: 0 none;
      color: @color-basic-500;
      .noborder();
      z-index: 3;
      margin: -1px 0;
    }

    &-contains-text {
      flex-wrap: wrap;
      padding-bottom: 0;
      .noborder();

      .txinfo {
        &__key {
          margin-bottom: 4px;
        }

        &__text {
          .footnote-1();
          width: 100%;
          padding: 13px 16px;
          border: 1px dashed @color-basic-100;
          border-radius: @border-radius;
          background: @color-basic-50;
          color: @color-basic-900;
        }
      }
    }

    &-padder {
      height: 40px;
      padding-top: 5px;
      .noborder();
    }

    .txinfo {
      .key-props {
        flex-basis: auto;
        flex-grow: 0;
        padding-right: 20px;
        overflow: hidden;
        .footnote-1();
      }

      &__key {
        .key-props();
        color: @color-basic-500;

        &-mass {
          .key-props();
          color: @color-basic-900;
        }
      }

      &__value {
        flex-basis: auto;
        flex-grow: 0;
        text-align: right;
        word-break: break-all;
        .footnote-1();
        color: @color-basic-900;
        &-uppercase:first-letter {
          text-transform: uppercase;
        }
        &-name {
          margin-left: 5px;
          display: inline-block;
        }
      }

      &__text {
        flex-basis: 100%;
        flex-grow: 1;
        text-align: left;
      }

      &__data {
        max-height: 140px;
        overflow: scroll;
      }

      &__button {
        color: @color-submit-300;
        cursor: pointer;
      }
    }

    &-border-ts {
      border-top: 1px solid @color-basic-100;
    }

    &-data {
      .txinfo__row {
        &:last-child {
          border-bottom: 1px dashed @color-basic-100;
        }
      }
    }
  }


  &__icon {
    width: @tx-icon-size;
    height: @tx-icon-size;
    background: none transparent;
    position: relative;
    border-radius: 50%;
    margin: 60px auto 30px;

    &.send {
      .icon-tx-send();
    }

    &.receive {
      .icon-tx-receive();
    }

    &.mass-send {
      .icon-tx-mass-transfer();
    }

    &.mass-receive {
      .icon-tx-mass-receive();
    }

    &.circular {
      .icon-tx-circular();
    }

    &.issue {
      .icon-tx-issue();
    }

    &.reissue {
      .icon-tx-reissue();
    }

    &.burn {
      .icon-tx-burn();
    }

    &.exchange-buy,
    &.exchange-sell,
    &.create-order {
      .icon-tx-exchange();
    }

    &.create-alias {
      .icon-tx-create-alias();
    }

    &.lease-in {
      .icon-tx-incoming-leasing();
    }

    &.lease-out {
      .icon-tx-lease();
    }

    &.unknown {
      .icon-tx-unknown();
    }

    &.cancel-leasing {
      .icon-tx-cancel-leasing();
    }

    &.data {
      .icon-tx-data();
    }

    &.sponsorship-start {
      .icon-tx-sponsorship-start();
    }

    &.sponsorship-stop {
      .icon-tx-sponsorship-stop();
    }

    &.sponsorship-fee {
      .icon-tx-sponsorship-plus();
    }

    &.set-script {
      .icon-tx-set-script();
    }

    &.set-script-cancel {
      .icon-tx-cancel-script();
    }

    &.set-asset-script {
      .icon-tx-set-asset-script();
    }

    &.script-invocation {
      .icon-tx-script-invocation();
    }

    &::before {
      width: @tx-icon-size;
      height: @tx-icon-size;
      background-size: auto @tx-icon-size * 2;
      background-color: @color-white;
      background-repeat: no-repeat;
      background-image: @transaction-icons;
      content: '';
      display: block;
    }
  }

  .spam {
    .txinfo__icon {
      &.send,
      &.receive,
      &.circular,
      &.exchange-buy,
      &.exchange-sell,
      &.reissue,
      &.sponsorship-start,
      &.sponsorship-stop,
      &.sponsorship-fee,
      &.set-asset-script,
      &.mass-send {
        &::before {
          background-position-y: bottom;
        }
      }
    }
  }

  .exchange-header-row {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    h3 {
      margin: 0;
    }
  }

  .spam-label {
    display: inline-block;
    background-color: @color-disabled-200;
    color: @color-basic-900;
    position: relative;
    top: auto;
    bottom: 3px;
    margin-top: 0;
    right: auto;
  }

  &__content.spam {
    .txinfo {
      &__icon {
        &.receive {
          .icon-tx-spam();
        }

        &.mass-receive {
          .icon-tx-mass-spam();
        }
      }
    }
  }

  .status-label {
    margin-top: -4px;
  }

  &__item {
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
    margin-right: 10px;
    .txinfo__unit {
      text-overflow: ellipsis;
      overflow: hidden;
      padding-right: 0;
    }

    &:last-child {
      justify-content: flex-end;
      margin-right: 0;
    }
  }

  &__show {
    &-fields {
      margin-bottom: -1px;
      padding-bottom: 10px;
    }

    &-text {
      cursor: pointer;
    }
  }

  .transaction-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 13px;
    padding: 0 0 16px;
    border-radius: 4px;
    max-height: 217px;
    overflow-y: hidden;
    background-color: @color-basic-50;
    transition: max-height 0.3s, margin 0.3s, padding 0.3s;
    &.ng-hide {
      max-height: 0;
      margin-bottom: 0;
      padding: 0;
    }
    &.ng-hide-add {
      overflow-y: hidden;
    }
    &.ng-hide-remove {
      overflow-y: hidden;
    }
    &__list {
      padding: 0 16px;
      margin: 0;
      max-height: 178px;
      overflow: hidden;
      transition: max-height 0.3s, margin 0.3s;
    }
    &__item {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-top: 1px dashed @color-basic-100;
      padding: 12px 0 13px;
      &_header {
        color: @color-basic-500;
      }
      &:first-child {
        padding-top: 16px;
        border-top: 0;
      }
      &:last-child {
        padding-bottom: 16px;
      }
    }
    &__actions {
      display: flex;
      justify-content: flex-end;
      padding: 0 16px;
      max-height: 100%;
    }
    &__action {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      &:not(:first-child) {
        &:before {
          content: '';
          background: @color-basic-500;
          width: 1px;
          height: 12px;
          margin: 0 10px;
        }
      }
    }
    &.show-all {
      max-height: 260px;
      .transaction-details__list {
        overflow-y: auto;
        max-height: 226px;
      }
    }
  }

  .invoke-args-list__item-value {
    max-width: 216px;
    &:hover ~ .tooltip {
      display: block;
    }
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .invoke-args-list__item {
    position: relative;
  }

  // TODO tooltip
  //.tooltip {
  //  display: none;
  //  max-width: 100%;
  //  position: absolute;
  //  padding: 6px 12px;
  //  top: 35px;
  //  right: 149px;
  //  transform-origin: center;
  //  color: @color-white;
  //  font-size: @font-size-caption-2;
  //  line-height: 13px;
  //  cursor: pointer;
  //  text-shadow: 0 1px 6px rgba(78, 92, 110, 0.6);
  //  z-index: 10;
  //  text-align: left;
  //  word-wrap: break-word;
  //  border-radius: @border-radius;
  //  background: rgba(78, 92, 110, 0.8);
  //  span {
  //    overflow: hidden;
  //    text-overflow: ellipsis;
  //    display: inline-block;
  //    text-align: center;
  //  }
  //
  //  &::before {
  //    position: absolute;
  //    content: '';
  //    z-index: -1;
  //    top: -5px;
  //    right: 10px;
  //    opacity: .8;
  //    width: 0;
  //    height: 0;
  //    border: 5px solid transparent;
  //    border-bottom-color: @color-basic-700;
  //    border-top: 0 none;
  //    transform: translate(0);
  //  }
  //
  //  &.right {
  //    right: 0;
  //  }
  //}
}


@media screen and (max-width: @width-media-tiny) {
  .recipients-row {
    padding: 9px 0 10px;
    &:first-child {
      padding-top: 12px;
    }
    &:last-child {
      padding-bottom: 12px;
    }
  }
}

.code-wrapper {
  border: 1px dashed @color-basic-200;
  border-radius: @border-radius;
  background: @color-basic-50;
  height: auto;
  max-height: 300px;
  word-break: break-all;
  padding: 17px;
  display: block;
  overflow: scroll;

  &-vertical {
    overflow-y: auto;
    overflow-x: hidden;
    .pre {
      white-space: normal;
    }
  }
}

@media screen and (max-width: 540px) {
  .txinfo {
    &__lead {
      padding: 10px 0;
    }

    &__row {
      padding: 8px 0;

      &-contains-text {
        flex-direction: column;
      }

      &-padder {
        height: 30px;
      }
    }
  }
}
